<template>
	<view class="page-box">
		<view class="top-type centerXY columnY pad-top-40">
			<template v-if="info.pay_status == 1">
				<view class="font-36 font-w-500">待支付</view>
				<view class="font-26 mar-top-20 centerXY">
					<view>支付倒计时：</view>
					<up-count-down v-if="info.end_pay_at" :time="hanldeTime(info.end_pay_at)" @change="onChangeTime"
						format="mm:ss">
						<view class="time color-error">
							<text>{{ timeData.minutes > 9 ? timeData.minutes : '0'+timeData.minutes}}&nbsp;分</text>
							<text>{{ timeData.seconds > 9 ? timeData.seconds : '0'+timeData.seconds }}&nbsp;秒</text>
						</view>
					</up-count-down>
				</view>
			</template>
			<view v-if="info.pay_status == 5" class="font-36 font-w-500 centerXY">
				<image class="imageIcon" src="/static/image/cancel.png"></image>
				<view>订单已取消</view>
			</view>
		</view>

		<view class="list-box pad-30">
			<view class="list" v-for="item in details" :key="item.id">
				<view class="pad-30 bg-white radius30">
					<view class="address font-30 font-w-500">
						地址：{{item.province}}{{item.city}}{{item.region}}{{item.street}}{{item.detail}}
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">订单号</view>
						<view class="color-text">{{item.order_no}}</view>
					</view>
				</view>
				<view class="pad-30 bg-white mar-top-30 radius30">
					<view class="mar-top-30">
						<view class="betweenX mar-top-30 font-26 font-w-400 centerY">
							<view class="color-text centerY shrink">
								<image class="avatar" :src="item.worker_info.avatar" mode="aspectFill"></image>
								<view class="mar-left-20">
									<view class="font-30">{{item.worker_info.name}}</view>
									<view class="mar-top-20">预计: {{timeFormat(item.plan_begin_at, 'yyyy-mm-dd hh:MM')}}
									</view>
								</view>
							</view>
							<view @click="hanldeOpenTel(item.worker_info)" v-if="item.pay_status == 3"
								class="button-style pad-top-bottom-10 pad-left-right-40">
								联系</view>
						</view>
					</view>
					<view v-if="item.plan_begin_at > 0" class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">预计上门：</view>
						<view class="color-text">{{timeFormat(item.plan_begin_at, 'yyyy-mm-dd hh:MM')}}</view>
					</view>
					<view v-if="info.pay_status == 3" class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464"></view>
						<view @click="hanldeDatetime(item)" class="color-text btn2">修改上门时间</view>
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">预计结束</view>
						<view class="color-text">{{timeFormat(item.plan_end_at, 'yyyy-mm-dd hh:MM')}}</view>
					</view>
					<up-datetime-picker :minDate="minDate" :maxDate="maxDate" ref="datetimePickerRef"
						:formatter="formatter" @confirm="hanldeConfirmDate($event,item)" @cancel="item.isTime = false"
						:show="item.isTime" step="01:00:00" v-model="item.newDate" format="YYYY-MM-DD HH:mm"
						:mode="item.dateMode">
					</up-datetime-picker>
					<view v-if="item.sign_begin_at > 0" class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">工人开始</view>
						<view class="color-text">{{timeFormat(item.sign_begin_at, 'yyyy-mm-dd hh:MM')}}</view>
					</view>
					<view v-if="item.sign_end_at > 0" class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">工人结束</view>
						<view class="color-text">{{timeFormat(item.item.sign_end_at, 'yyyy-mm-dd hh:MM')}}</view>
					</view>
					<view v-if="item.end_pay_at > 0" class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">支付截止</view>
						<view class="color-text">{{timeFormat(item.end_pay_at, 'yyyy-mm-dd hh:MM:ss')}}</view>
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400" v-for="info in item.details" :key="info.id">
						<view class="color-646464">已选服务</view>
						<view class="color-text">{{info.buy_num}}/{{info.work_unit}} {{info.work_name}}</view>
					</view>
					<up-line margin="30rpx 0 30rpx 0"></up-line>
					<view class="betweenX mar-top-30">
						<view></view>
						<view class="centerXY">
							<view class="color-text font-26">订单总额</view>
							<text class="color-error font-36 font-w-500">￥{{item.amount}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="betweenX button-bottom centerXY" v-if="info.pay_status == 1">
			<view class="font-26"></view>
			<view class="centerXY font-24">
				<view @click="isPay = true" class="btn mar-left-20 button-style">继续支付</view>
			</view>
		</view>
		<view class="betweenX button-bottom centerXY" v-else-if="info.pay_status == 3">
			<view class="font-26"></view>
			<view class="centerXY font-24">
				<view @click="hanldeRefund(info)" class="btn">订单退款</view>
				<view @click="hanldeOrderTrends(info)" class="btn mar-left-20">订单动态</view>
				<!-- <view class="btn mar-left-20 button-style">评价订单</view> -->
			</view>
		</view>

		<!-- 选择支付方式 -->
		<up-popup v-if="isPay" :show="isPay" round="20" bgColor="#f4f5f9" closeable @close="isPay =false">
			<view class="pad-30 font-36 color-text">选择支付方式</view>
			<pay-list :orderNos="[info.order_no]"></pay-list>
		</up-popup>

		<!-- 退款弹窗 -->
		<up-popup :show="isRefund" mode="center" round="30" closeable>
			<view class="centerXY columnY popup-bg pad-30 color-text">
				<view class="font-30 mar-top-30">退款</view>
				<view v-for="(item,i) in refundData" :key="i" class="font-28 mar-top-30">
					<view>服务: {{item?.details?.buy_num}}/{{item?.details?.work_unit}} {{item?.details?.work_name}}
					</view>
					<view class="mar-top-20 betweenX">
						<view class="color-error">违约金: {{item?.data?.break_amount}}</view>
						<view>退款金额: {{item?.data?.refund_amount}}</view>
					</view>
					<view class="color-error mar-top-20">提示: {{ item.data.rule}}</view>
				</view>

				<view class="textarea mar-top-30">
					<up-textarea v-model="refundText" placeholder="请输入退款原因" count maxlength="100"></up-textarea>
				</view>
				<view>
					<view @click="submitEvaluate" class="btn mar-top-30">确定</view>
				</view>
			</view>
		</up-popup>

		<my-popup title="提示" content="你确定要修改上门时间吗？" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		orderInfo,
		refundPreview,
		refundAdd,
		changePlanBeginAt,
		orderTrends
	} from '@/api/index.js';

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		timeFormat
	} from '@/uni_modules/uview-plus';
	
	// 跳转订单动态
	const hanldeOrderTrends = (item) => {
		console.log(item)
		uni.navigateTo({
			url: '/pages/order/orderTrends/orderTrends?order_no=' + item.order_no
		})
	}

	// 时间选择
	const minDate = Date.now() + (2 * 60 * 60 * 1000); // 开始时间默认2小时过后
	const currentDate = new Date(Date.now());
	// 添加 2 个月
	const maxDate = currentDate.setMonth(currentDate.getMonth() + 1);
	const dateMode = ref("date");
	const formatter = (type, value) => {
		if (type === 'minute') {
			return `00`;
		}
		return value;
	};

	// 打开弹窗
	const itemInfo = ref({});
	let isPopup = ref(false);
	const hanldeDatetime = (item) => {
		itemInfo.value = item;
		isPopup.value = true;
	}

	// 提交要修改的时间
	const hanldeConfirmDate = (e, item) => {
		let time = e.mode == 'datetime' ? timeFormat(e.value, 'yyyy-mm-dd hh:00') :
			timeFormat(item.worker.plan_begin_at, 'yyyy-mm-dd');
		changePlanBeginAt({
			order_no: item.order_no,
			new_plan_begin_at: time
		}).then(res => {
			item.isTime = false;
			uni.$u.toast('操作成功');
			getOrderInfo();
		})
	}

	// 打开选择时间弹窗
	const hanldeConfirm = () => {
		isPopup.value = false;
		itemInfo.value.isTime = true;
	}

	// 使用 reactive 创建响应式对象  
	const timeData = ref({});

	// 定义 onChange 方法  
	const onChangeTime = (e) => {
		timeData.value = e;
	};

	// 提交退款
	const submitEvaluate = () => {
		if (refundText.value == "") {
			uni.$u.toast('请输入退款原因');
			return
		}

		refundAdd({
			order_no: info.value.order_no,
			refund_reason: refundText.value
		}).then(res => {
			isRefund.value = false;
			uni.$u.toast('操作成功');
			getOrderInfo();
		})
	}

	// 订单退款
	const isRefund = ref(false);
	// 退款失败提示框
	const refundText = ref('');
	const refundData = ref([]);
	const enableRefund = ref(false);
	const hanldeRefund = async (row) => {
		let preview = await refundPreview({
			order_no: row.order_no,
			scene: '11'
		})

		if (preview.data.enable_refund) {
			isRefund.value = true;
			let orderDdata = preview.data.refund_rules.service_order_detail;
			let newArray = [];
			await details.value.forEach(item => {
				item.details.forEach(info => {
					for (let key in orderDdata) {
						newArray.push({
							data: orderDdata[key],
							details: info
						})
					}

				})
			})
			refundData.value = newArray;
		}
		enableRefund.value = preview.data.enable_refund;
	}

	// 拨打电话
	const hanldeOpenTel = (user) => {
		uni.makePhoneCall({
			phoneNumber: user.tel, // 电话号码
			success: function() {
				console.log('Call successful');
			},
			fail: function(err) {
				console.error('Call failed: ', err);
			}
		});
	}

	// 接收参数
	const props = ref({});
	onLoad((option) => {
		if (option.order_no) {
			props.value = option;
			getOrderInfo();
		}
	})

	const worker = ref({});
	const info = ref({});
	const details = ref([]);
	const isPay = ref(false);

	// 当前时间
	const hanldeTime = (endTiem) => {
		const timeNew = parseInt(Date.now() / 1000);
		return (endTiem - timeNew) * 1000;
	}

	const getOrderInfo = () => {
		// 获取订单详情
		orderInfo({
			order_no: props.value.order_no
		}).then(res => {
			let data = res.data;
			info.value = data.info;
			details.value = data.service_orders.map(item => {
				item.isTime = false;
				return item
			});
			worker.value = data.worker;
		})
	}

	// 获取动态订单状态
	// const getOrderTrends = () => {
	// 	orderTrends({
	// 		order_no: props.value.order_no
	// 	}).then(res => {
	// 		console.log(res);
	// 	})
	// }
</script>

<style scoped lang="scss">
	.imageIcon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		z-index: 2;
	}

	.btn {
		width: 200rpx;
		height: 80rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 80rpx;
		text-align: center;
	}

	.btn2 {
		width: 200rpx;
		height: 60rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 60rpx;
		text-align: center;
	}

	.list {
		margin-bottom: 30rpx;
		overflow: hidden;
	}

	.list-box {
		padding-bottom: 150rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.popup-bg {
		width: 670rpx;
		background: linear-gradient(180deg, #F1F5FC 0%, #FFFFFF 100%);
		border-radius: 30rpx;
	}

	.textarea {
		width: 100%;
	}
</style>